<template>
	<el-dialog v-model="visibleDialog" title="表单详情" append-to-body class="formDetail" @close="handleCancel">
		<div>
			<er-form-preview ref="EReditorRef" :file-upload-u-r-i="uploadFileApi" :is-show-complete-button="false" />
		</div>
	</el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import formTemplate from '@/api/flow/formtemplate'
import { erFormPreview } from '@ER/formEditor'

// 同步值
const $myEmit = defineEmits(['update:modelValue'])

const myProps = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	templateId: {
		type: String,
		default: null
	}
})

const EReditorRef = ref()
const { VITE_APP_BASE_API } = import.meta.env
const uploadFileApi = ref(`${VITE_APP_BASE_API}/v1/oss/upload`)

const handleCancel = () => {
	$myEmit('update:modelValue', false)
}

const getMessageInfoDetail = async () => {
	const { templateId } = myProps
	const res = await formTemplate.formTemplateDetailApi(templateId)
	const formStructure = JSON.parse(res.content)
	EReditorRef.value.setData(formStructure)
	console.log(res)
}

getMessageInfoDetail()

// computed
const visibleDialog = computed({
	get() {
		return myProps.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})
</script>

<style lang="scss">
</style>
